<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/misc/PositionPicker/examples/positionPicker.html -->
    <link rel="stylesheet" type="text/css" href="/hybrid/html/css/layer.css" />
    <base href="http://webapi.amap.com/ui/1.1/ui/misc/PositionPicker/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>拖拽选址</title>
    <style>
    html,
    body {
        height: 100%;
        margin: 0;
        width: 100%;
        padding: 0;
        overflow: hidden;
        font-size: 13px;
    }
    
    .map {
        height: 100%;
        width: 100%;
        float: left;
    }
    
    #right {
        color: #444;
        background-color: #f8f8f8;
        width: 0%;
        float: left;
        height: 100%;
    }
    
    #start,
    #stop,
    #right input {
        margin: 4px;
        margin-left: 15px;
    }
    
    .title {
        width: 100%;
        background-color: #dadada
    }
    
    button {
        border: solid 0px;
        background-color:#39B54A;
		color:white;
		width: 60px;
		height: 28px;
		position: absolute;
		z-index: 10000;
		top: 50px;
		right: 40px;
		font-size: 15px;
		
    }
    
    .c {
        font-weight: 600px;
        padding-left: 15px;
        padding-top: 4px;
    }
    
    #lnglat,
    #address,
    #nearestJunction,
    #nearestRoad,
    #nearestPOI,
    .title {
        padding-left: 15px;
    }
	
	
	
	    #pickerBox {
	        position: absolute;
	        z-index: 9999;
	        top: 50px;
	        right: 30px;
	        width: 300px;
	    }
	    
	    #pickerInput {
	        width: 200px;
	        padding: 5px 5px;
	    }
	    
	    #poiInfo {
	        background: #fff;
	    }
	    
	    .amap_lib_placeSearch .poibox.highlight {
	        background-color: #CAE1FF;
	    }
	    
	    .amap_lib_placeSearch .poi-more {
	        display: none!important;
	    }
    </style>
</head>

<body>
	<button id="btnOK"> 确认 </button>
	  <div id="container" class="map" tabindex="0"></div>
	    <div id="pickerBox">
	        <input id="pickerInput" placeholder="输入关键字选取地点" />
	        <div id="poiInfo"></div>
	    </div>
 <div id="container" class="map" tabindex="0"></div>
<div id='right'>
<!--       <div>
            <div class='title'>选择模式</div>
            <input type='radio' name='mode' value='dragMap' checked>拖拽地图模式</input>
            </br>
            <input type='radio' name='mode' value='dragMarker'>拖拽Marker模式</input>
        </div> -->
        <div>
            <div class='c'>经纬度:</div>
            <input id='lnglat' type=></div>
            <div class='c'>地址:</div>
            <input id='address' type=></div>
       </div>
    </div>

	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
    <script type="text/javascript" src='http://webapi.amap.com/maps?v=2.0&key=0c84208de6aaff3252ba3f7cd1d2a6c8&plugin=AMap.ToolBar'></script>
    <!-- UI组件库 1.0 -->
    <script src="http://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
    <script type="text/javascript">
		document.addEventListener('UniAppJSBridgeReady',function() {
			console.log("监听进来了吗");
			document.getElementById('btnOK').addEventListener('click', function() {
				var position=document.getElementById('lnglat').value;
				var address=document.getElementById('address').value;
				localStorage.setItem('hll_lng',position);
				localStorage.setItem('hll_address',address);
				var startStroage=localStorage.getItem('hll_address');
				var data = {
					postion:position,
					address:address
					};	
				console.log('JSON格式为'+JSON.stringify(data));
				var url='/pages/movehouse/middlePage/middlePage?data='+encodeURIComponent(JSON.stringify(data));
				console.log(url);
				uni.navigateTo({
					url:url
				});
				// uni.navigateBack();
			});
	})

    AMapUI.loadUI(['misc/PositionPicker','misc/PoiPicker'], function(PositionPicker,PoiPicker) {
		var map = new AMap.Map('container', {
		    zoom: 20,
		    scrollWheel: false
		});
        var positionPicker = new PositionPicker({
            mode: 'dragMap',
            map: map
        });
		var infoWindow = new AMap.InfoWindow({
		    offset: new AMap.Pixel(0, -40)
		});
        positionPicker.on('success', function(positionResult) {
            document.getElementById('lnglat').value = positionResult.position;
            document.getElementById('address').value = positionResult.address;
			infoWindow.setContent('POI信息: <pre>'+'地址:'+positionResult.address + '</pre>');
			infoWindow.open(map,positionResult.position);
        });
        positionPicker.on('fail', function(positionResult) {
            document.getElementById('lnglat').value = ' ';
            document.getElementById('address').value = ' ';

        });
        var onModeChange = function(e) {
            positionPicker.setMode(e.target.value)
        }
		positionPicker.start();
        map.panBy(0, 1);

        map.addControl(new AMap.ToolBar({
            liteStyle: true
        }))
		
	
	 //poiPicker 
	var poiPicker = new PoiPicker({
	        //city:'北京',
	        input: 'pickerInput'
	    });
			
	    //初始化poiPicker
	    poiPickerReady(poiPicker);
		function poiPickerReady(poiPicker) {
				
		    window.poiPicker = poiPicker;
				
		    var marker = new AMap.Marker();
				
				
		    //选取了某个POI
		    poiPicker.on('poiPicked', function(poiResult) {
				
		        var source = poiResult.source;
		            poi = poiResult.item;
				positionPicker.start(poi.location);
		        infoWindow.setContent('POI信息: <pre>'+'名称:'+poi.name+'\n地址:'+poi.address + '</pre>');
		        infoWindow.open(map,poi.location);
				});
			}
		
    });
	  
	  
    </script>
</body>

</html>